Bemästra Navigation API: Routing och historikhantering i Single Page-applikationer

Navigation API representerar ett betydande framsteg i hur vi hanterar routing och historikhantering inom Single Page-applikationer (SPA). Traditionella metoder förlitar sig ofta på att manipulera `window.location`-objektet eller använda tredjepartsbibliotek. Även om dessa tillvägagångssätt har tjänat oss väl, erbjuder Navigation API en mer strömlinjeformad, högpresterande och funktionsrik lösning, vilket ger utvecklare större kontroll över användarens navigeringsupplevelse.

Vad är Navigation API?

Navigation API är ett modernt webbläsar-API som är utformat för att förenkla och förbättra hur SPA-applikationer hanterar navigering, routing och historik. Det introducerar ett nytt `navigation`-objekt som tillhandahåller metoder och händelser som gör det möjligt för utvecklare att fånga upp och kontrollera navigeringshändelser, uppdatera URL:en och upprätthålla en konsekvent webbläsarhistorik utan fullständiga sidomladdningar. Detta resulterar i en snabbare, smidigare och mer responsiv användarupplevelse.

Fördelar med att använda Navigation API

• Förbättrad prestanda: Genom att eliminera fullständiga sidomladdningar förbättrar Navigation API prestandan för SPA-applikationer avsevärt. Övergångar mellan olika vyer blir snabbare och smidigare, vilket leder till en mer engagerande användarupplevelse.
• Förbättrad kontroll: API:et ger finkornig kontroll över navigeringshändelser, vilket gör att utvecklare kan fånga upp och modifiera navigeringsbeteendet vid behov. Detta inkluderar att förhindra navigering, omdirigera användare och köra anpassad logik före eller efter att navigering sker.
• Förenklad historikhantering: Hanteringen av webbläsarens historikstack blir enklare med Navigation API. Utvecklare kan programmatiskt lägga till, ersätta och gå igenom historikposter, vilket säkerställer en konsekvent och förutsägbar webbläsarupplevelse.
• Deklarativ navigering: Navigation API uppmuntrar ett mer deklarativt tillvägagångssätt för routing, vilket gör att utvecklare kan definiera navigeringsregler och beteenden på ett tydligt och koncist sätt. Detta förbättrar kodens läsbarhet och underhållbarhet.
• Integration med moderna ramverk: Navigation API är utformat för att integreras sömlöst med moderna JavaScript-ramverk och bibliotek, som React, Angular och Vue.js. Detta gör det möjligt för utvecklare att utnyttja API:ets funktioner inom sina befintliga utvecklingsflöden.

Grundläggande koncept och funktioner

1. `navigation`-objektet

Kärnan i Navigation API är `navigation`-objektet, som är tillgängligt via det globala `window`-objektet (dvs. `window.navigation`). Detta objekt ger tillgång till olika egenskaper och metoder relaterade till navigering, inklusive:

• `currentEntry`: Returnerar ett `NavigationHistoryEntry`-objekt som representerar den aktuella posten i navigeringshistoriken.
• `entries()`: Returnerar en array av `NavigationHistoryEntry`-objekt som representerar alla poster i navigeringshistoriken.
• `navigate(url, { state, info, replace })`: Navigerar till en ny URL.
• `back()`: Navigerar tillbaka till föregående historikpost.
• `forward()`: Navigerar framåt till nästa historikpost.
• `reload()`: Laddar om den aktuella sidan.
• `addEventListener(event, listener)`: Lägger till en händelselyssnare för navigeringsrelaterade händelser.

2. `NavigationHistoryEntry`

Gränssnittet `NavigationHistoryEntry` representerar en enskild post i navigeringshistoriken. Det ger information om posten, såsom dess URL, tillstånd (state) och unika ID.

• `url`: URL:en för historikposten.
• `key`: En unik identifierare för historikposten.
• `id`: En annan unik identifierare, särskilt användbar för att spåra livscykeln för en navigeringshändelse.
• `sameDocument`: En boolean som indikerar om navigeringen resulterar i en navigering inom samma dokument.
• `getState()`: Returnerar det tillstånd (state) som är associerat med historikposten (satt under navigering).

3. Navigeringshändelser

Navigation API skickar ut flera händelser som gör att utvecklare kan övervaka och kontrollera navigeringsbeteendet. Dessa händelser inkluderar:

• `navigate`: Skickas när en navigering initieras (t.ex. genom att klicka på en länk, skicka ett formulär eller anropa `navigation.navigate()`). Detta är den primära händelsen för att fånga upp och hantera navigeringsförfrågningar.
• `navigatesuccess`: Skickas när en navigering har slutförts framgångsrikt.
• `navigateerror`: Skickas när en navigering misslyckas (t.ex. på grund av ett nätverksfel eller ett ohanterat undantag).
• `currentchange`: Skickas när den aktuella historikposten ändras (t.ex. när man navigerar framåt eller bakåt).
• `dispose`: Skickas när en `NavigationHistoryEntry` inte längre är nåbar, till exempel när den tas bort från historiken under en `replaceState`-operation.

Implementera routing med Navigation API: Ett praktiskt exempel

Låt oss illustrera hur man använder Navigation API för att implementera grundläggande routing i en enkel SPA. Tänk dig en applikation med tre vyer: Hem, Om oss och Kontakt.

Skapa först en funktion för att hantera ruttändringar:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Hem
Välkommen till Hemsidan!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Om oss
Lär dig mer om oss.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Kontakta oss.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Sidan hittades inte
Sidan kunde inte hittas.
';
  }
}

Lägg sedan till en händelselyssnare för `navigate`-händelsen:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Förhindra webbläsarens standardnavigering

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Lös upp löftet efter att rutten hanterats
  });

  event.transition = promise;
});

Denna kod fångar upp `navigate`-händelsen, extraherar URL:en från `event.destination`-objektet, förhindrar webbläsarens standardnavigering, anropar `handleRouteChange` för att uppdatera innehållet och sätter `event.transition`-löftet. Att sätta `event.transition` säkerställer att webbläsaren väntar på att innehållsuppdateringen ska slutföras innan sidan uppdateras visuellt.

Slutligen kan du skapa länkar som utlöser navigering:

Hem | Om oss | Kontakt

Och koppla en klick-lyssnare till dessa länkar:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Detta sätter upp grundläggande routing på klientsidan med hjälp av Navigation API. Nu, när du klickar på länkarna, kommer en navigeringshändelse att utlösas som uppdaterar innehållet i `content`-diven utan en fullständig sidomladdning.

Lägga till tillståndshantering (State Management)

Navigation API låter dig också associera ett tillstånd (state) med varje historikpost. Detta är användbart för att bevara data mellan navigeringshändelser. Låt oss modifiera det föregående exemplet för att inkludera ett state-objekt.

När du anropar `navigation.navigate()`, kan du skicka med ett `state`-objekt:

window.navigation.navigate('/about', { state: { pageTitle: 'Om oss' } });

Inuti `navigate`-händelselyssnaren kan du komma åt tillståndet med `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Min App'; // Standardtitel

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Hem
Välkommen till Hemsidan!
';
      title = 'Hem';
      break;
    case '/about':
      contentDiv.innerHTML = '
Om oss
Lär dig mer om oss.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Kontakta oss.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Sidan hittades inte
Sidan kunde inte hittas.
';
      title = '404 Sidan hittades inte';
  }
  document.title = title;
}

I detta modifierade exempel accepterar `handleRouteChange`-funktionen nu en `state`-parameter och använder den för att uppdatera dokumentets titel. Om inget tillstånd skickas med, blir standardvärdet 'Min App'.

Använda `navigation.updateCurrentEntry()`

Ibland kanske du vill uppdatera tillståndet för den aktuella historikposten utan att utlösa en ny navigering. Metoden `navigation.updateCurrentEntry()` låter dig göra detta. Till exempel, om en användare ändrar en inställning på den aktuella sidan, kan du uppdatera tillståndet för att återspegla den ändringen:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Uppdaterade inställning:', setting, 'till', value);
}

// Exempel på användning:
updateUserSetting('theme', 'dark');

Denna funktion hämtar det nuvarande tillståndet, slår samman den uppdaterade inställningen och uppdaterar sedan den aktuella historikposten med det nya tillståndet.

Avancerade användningsfall och överväganden

1. Hantera formulärinskickningar

Navigation API kan användas för att hantera formulärinskickningar i SPA-applikationer, vilket förhindrar fullständiga sidomladdningar och ger en smidigare användarupplevelse. Du kan fånga upp händelsen för formulärinskickning och använda `navigation.navigate()` för att uppdatera URL:en och visa resultaten utan en fullständig sidomladdning.

2. Asynkrona operationer

När du hanterar navigeringshändelser kan du behöva utföra asynkrona operationer, som att hämta data från ett API. Egenskapen `event.transition` låter dig associera ett löfte (promise) med navigeringshändelsen, vilket säkerställer att webbläsaren väntar på att den asynkrona operationen ska slutföras innan sidan uppdateras. Se exemplen ovan.

3. Återställning av scrollposition

Att bibehålla scrollpositionen under navigering är avgörande för att ge en bra användarupplevelse. Navigation API tillhandahåller mekanismer för att återställa scrollpositionen när man navigerar bakåt eller framåt i historiken. Du kan använda `scroll`-egenskapen hos `NavigationHistoryEntry` för att lagra och återställa scrollpositionen.

4. Felhantering

Det är viktigt att hantera fel som kan uppstå under navigering, såsom nätverksfel eller ohanterade undantag. Händelsen `navigateerror` låter dig fånga och hantera dessa fel på ett elegant sätt, vilket förhindrar att applikationen kraschar eller visar ett felmeddelande för användaren.

5. Progressiv förbättring (Progressive Enhancement)

När man bygger SPA-applikationer med Navigation API är det viktigt att tänka på progressiv förbättring. Se till att din applikation fungerar korrekt även om Navigation API inte stöds av webbläsaren. Du kan använda funktionsdetektering (feature detection) för att kontrollera om `navigation`-objektet finns och falla tillbaka på traditionella routingmetoder om det behövs.

Jämförelse med traditionella routingmetoder

Traditionella routingmetoder i SPA-applikationer förlitar sig ofta på att manipulera `window.location`-objektet eller använda tredjepartsbibliotek som `react-router` eller `vue-router`. Även om dessa metoder är välanvända och väletablerade, har de vissa begränsningar:

• Fullständiga sidomladdningar: Att manipulera `window.location` direkt kan utlösa fullständiga sidomladdningar, vilket kan vara långsamt och störande för användarupplevelsen.
• Komplexitet: Att hantera historik och tillstånd med traditionella metoder kan vara komplext och felbenäget, särskilt i stora och komplexa applikationer.
• Prestanda-overhead: Tredjepartsbibliotek för routing kan lägga till betydande prestanda-overhead, särskilt om de inte är optimerade för din applikations specifika behov.

Navigation API adresserar dessa begränsningar genom att erbjuda en mer strömlinjeformad, högpresterande och funktionsrik lösning för routing och historikhantering. Det eliminerar fullständiga sidomladdningar, förenklar historikhanteringen och ger finkornig kontroll över navigeringshändelser.

Webbläsarkompatibilitet

I slutet av 2024 har Navigation API bra stöd i moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge. Det är dock alltid en god praxis att kontrollera den senaste informationen om webbläsarkompatibilitet på resurser som Can I use innan du implementerar Navigation API i dina produktionsapplikationer. Om stöd för äldre webbläsare är ett måste, överväg att använda en polyfill eller en fallback-mekanism.

Sammanfattning

Navigation API är ett kraftfullt verktyg för att bygga moderna, högpresterande SPA-applikationer med avancerade funktioner för routing och historikhantering. Genom att utnyttja API:ets funktioner kan utvecklare skapa snabbare, smidigare och mer engagerande användarupplevelser. Även om inlärningskurvan initialt kan vara något brantare jämfört med enklare, äldre metoder, gör fördelarna med Navigation API, särskilt i komplexa applikationer, det till en värdefull investering. Omfamna Navigation API och lås upp den fulla potentialen i dina SPA-applikationer.

Vidare läsning

• MDN Web Docs: Navigation API
• WICG Navigation API Specification